{extend name="layout/base"}

{block name="content"}
<div class="list_top">
  <div class="layui-inline">
      <input class="layui-input" name="key" id="key" placeholder="请输入文章标题">
  </div>
  <div class="layui-inline">
      <select name="type" id="type" class="layui-select">
          <option value="">选择所属分类</option><br/>
          {foreach $type as $key=>$value }
            <option value="{$value.cate_id}">{$value.html}{$value.cate_name}</option><br/>
          {/foreach}
      </select>
  </div>
  <button class="layui-btn" id="search" data-type="reload">搜索</button>
  <button class="layui-btn" id="add" data-type="reload"><i class="layui-icon">&#xe608;</i>添加</button>
</div>

<table lay-filter="table" id="table" class="table"></table>

<script type="text/html" id="tool">
    <a class="layui-btn layui-btn-sm" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
    <a class="layui-btn layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
</script>

<script type="text/html" id="imgTpl">
    <img src="{{d.image}}" width="50" height="50" alt="">
</script>

<script>
    layui.use(['jquery', 'table', 'layer'], function ($, table, layer) {
        var opt = {
            elem: '#table',
            url: "{:url('')}",
            method: 'post',
            page: true,
            toolbar: true,
            cols: [[
                {field: 'aid', title: 'ID'},
                {field: 'title', title: '文章标题'},
                {field: 'image', title: '缩略图', templet: '#imgTpl'},
                {field: 'cate_name', title: '所属栏目'},
                {field: 'utime', title: '更新时间'},
                {title: '操作', toolbar: '#tool'}
            ]],
            where: {}
        }, tabIns = table.render(opt);

        $('#search').on('click', function() {
            var key = $('#key').val();
            var type = $('#type').val();
            // if($.trim(key)==='') {
            //     layer.msg('请输入关键字！',{icon:0});
            //     return;
            // }
            tabIns.reload({
                where: {key: key,type: type}
            });
        });
        // 添加文章
        $('#add').on('click', function () {
            location.href = "{:url('article/add')}"
            // layer.open({
            //     type: 2,
            //     area: ['50%', '50%'],
            //     title: '添加',
            //     content: "{:url('add')}"
            // })
        })
        table.on('tool(table)', function (obj) {
            var aid = obj.data.aid;
            switch (obj.event) {
                case 'del':
                    layer.confirm('确定要删除吗', function (index) {
                        $.get("{:url('article/delete')}", {aid: aid});
                        layer.close(index);
                        tabIns.reload(opt)
                    });
                    break;
                case 'edit':
                    location.href="{:url('article/edit')}?aid="+aid;
                    // layer.open({
                    //         type: 2,
                    //         area: ['98%', '98%'],
                    //         title: '编辑',
                    //         content: "{:url('article/edit')}?aid=" + aid
                    // })
                    break;
                default:
                    break;
            }
        });
    });
</script>
{/block}
